iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0

來輕鬆聊聊

今天將接續前篇的內容,分享許多排版時常用的效果。


不透明度

  • opacity屬性可以決定元素的不透明程度,值的範圍是從0~1之間含小數點任一數字。預設值為1,代表完全不透明,數字越小越透明。值設定為inherit,將可以繼承父元素的不透明度。

範例

<!-- HTML -->
<h1>我不透明</h1>
<h2>稍微透明</h2>
<h3>有點透明</h3>
<h4>我是誰 我在哪</h4>
<!-- CSS -->
h1 {
  opacity: 1;
}
h2 {
  opacity: 0.7;
}
h3 {
  opacity: 0.3;
}
h4 {
  opacity: 0;
}
h4:hover {
  opacity: 1;
  color: blue;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210910/20141326ts2J6YhoU3.jpg
上方為不同的不透明度所產生的效果,可以看到<h4>的不透明度為0,儘管背景有顏色依然不會顯現
https://ithelp.ithome.com.tw/upload/images/20210910/20141326Kw0inoIXOa.jpg
我設定將游標移至<h4>上的時候,不透明度為1、顏色為藍色,可由此看出不透明度的效果差異。

大小寫轉換、行高、:hover選擇器

  • 大小寫轉換通常用在英文系文字,藉由text-transform屬性與給其不同的值來達到轉換的目的,常見的屬性值如下:
    • none為預設值,維持原有狀態。
    • lowercase可以使文字全部小寫表示。
    • uppercase可以使文字全部大寫表示。
    • capitalize會讓每一個詞彙的第一個字母大寫表示。
    • initial會讓文字使用預設值表示。
    • inherit會繼承父元素的屬性值。
  • line-height為行高屬性,用來調整文字行與行之間的距離,單位為距離。
  • hover有懸浮的意思,在CSS選擇器後方加上:hover,代表當游標移至目標元素時應產生的效果。

範例

<!-- HTML -->
<p>Today is a wonderful day. But I have to finish this article. Thanks for reading. Let's have fun with programming.</p>
<!-- CSS -->
p:hover {
  line-height: 40px;
  text-transform: uppercase;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210910/20141326YpnCaCaFfT.jpg
上方為文字原有的狀態。
https://ithelp.ithome.com.tw/upload/images/20210910/201413265DVkwrGGlD.jpg
可以看到上方,將游標移至文字範圍中,行高和大小寫的變化。

定位

  • position為定位屬性,為網頁排版中最重要的元素之一,依據不同的屬性值,給予元素不同的定位方式。定位元素的內容與理論比較進階,這邊就藉由範例簡單做介紹。
    • static為靜止狀態,維持元素預設的位置。
    • absolute會將元素從原有的定位清除,定位點在原來位置的左上角。若為元素加上上下左右任一距離屬性,則定位點會變為整個畫面的左上角。
    • relative會保留原來的區域,藉由其他屬性來改變元素相對其原來的位置。
    • sticky可以使元素在網頁滾動而超出元素可以完整顯示的範圍時,維持在一個固定位置,其定位會類似於relative
    • fixed可以使元素在網頁滾動時,維持在一個固定位置,而且定位會類似於absolute

範例

<!-- HTML -->
<div id="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
</div>
<!-- CSS -->
#container {
  height: 400px;
  background: orange;
}
.box {
  width: 100px;
  height: 100px;
  border: 6px solid green;
}
.box-1 {
  background: blue;
}
.box-2 {
  position: relative;
  top: 30px;
  left: 30px;
  background: gray;
}
.box-3 {
  position: absolute;
  background: blue;
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210910/20141326qbU5zOa6bz.jpg


之後的文章,可能會更專注在介紹程式語法,若有任何問題,也歡迎在下方留言或者私訊我哦!

內容來源:
freeCodeCamp|CodePen


上一篇
視覺設計(1)
下一篇
視覺設計(3)
系列文
從freeCodeCamp進入前端宇宙9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言